<template>
	<div class="app-container">
		<div class="bgWhite radius8 p25">
			<div>
				<span class="fb fs18 mr20">订单编号：202462976600</span>
				<span class="fs14">业务经理：</span><span class="color2 fs14">{{form.businessManager}}</span>
			</div>
			<div class="flex colo-top row-between">
				<el-form class="p20" @submit.native.prevent :model="form" ref="queryRef" :rules="rules" :inline="true"
					label-width="110px">
					<el-form-item label="客户姓名：" prop="customerName">
						<div style="width: 248px">{{form.customerName}}</div>
					</el-form-item>
					<el-form-item label="客户手机号：" prop="cropCode">
						<div style="width: 248px">{{form.customerPhone}}</div>
					</el-form-item>
					<el-form-item label="客户类型：" prop="customerType">
						<div style="width: 248px">
							<dict-tag :options="bus_customer_type" :value="form.customerType" style="width: 248px" />
						</div>
					</el-form-item>
					<el-form-item label="收货人：" prop="recipient">
						<div style="width: 248px">{{form.recipient}}</div>
					</el-form-item>
					<el-form-item label="收货人手机号：" prop="recipientPhone">
						<div style="width: 248px">{{form.recipientPhone}}</div>
					</el-form-item>
					<el-form-item label="收货地址：" prop="shippingAddress">
						<div style="width: 248px;line-height: 18px;">{{form.shippingAddress}}</div>
					</el-form-item>
				</el-form>
				<div class="flex col-top mt30" style="white-space: nowrap;">
					<div class="mr20">
						<div class="fs14 color2">订单状态</div>
						<div class="mt20 fs20 flex col-center">
							<div :class="activeStatus(form.orderStatus)"><span class="drop"></span></div>
							<dict-tag :options="bus_order_status" :value="form.orderStatus" />
						</div>
					</div>
					<div>
						<div class="fs14 color2">订单金额</div>
						<div class="fs20" style="margin-top: 23px;">¥{{form.orderTotalAmount}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bgWhite radius8 mt30">
			<div class="fb border-bottom plr30 pt20 pb20">
				流程进度
			</div>
			<div class="pt30 pb30">
				<progressGroup :array="progressLine"></progressGroup>
			</div>
		</div>
		<div class="bgWhite radius8 mt30">
			<div class="fb border-bottom plr30 pt20 pb20">
				订单详情
			</div>
			<div class=" plr30 ">
				<div class="fb pt20 pb20">
					基本信息
				</div>
				<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
					<el-table-column label="订单来源" align="center" prop="orderSource">
						<template v-slot="scope">
							<dict-tag :options="bus_source" :value="form.orderSource" />
						</template>
					</el-table-column>
					<el-table-column label="付款类型" align="center" prop="paymentType">
						<template v-slot="scope">
							<dict-tag :options="bus_pay_type" :value="form.paymentType" />
						</template>
					</el-table-column>
					<el-table-column label="支付方式" align="center" prop="paymentMethod">
						<template v-slot="scope">
							<dict-tag :options="bus_pay_status" :value="form.paymentMethod" />
						</template>
					</el-table-column>
					<el-table-column label="配送方式" align="center" prop="logisticsId">
						<template v-slot="scope">
							<dict-tag :options="bus_logistics_type" :value="form.logisticsId" />
						</template>
					</el-table-column>
					<el-table-column label="物流信息" align="center" prop="paymentMethod">
						<template v-slot="scope">
							<span class="main-color cursor" @click="logistics(form.yyLogisticsInformation)">查看物流</span>
						</template>
					</el-table-column>
				</el-table>
				<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
					<el-table-column label="订单金额" align="center" prop="id">
						<template v-slot="scope">
							￥{{form.orderTotalAmount}}
						</template>
					</el-table-column>
					<el-table-column label="运费" align="center" prop="customerName">
						<template v-slot="scope">
							￥{{form.wuliufei}}
						</template>
					</el-table-column>
					<el-table-column label="回款金额" align="center" prop="receivedAmount">
						<template v-slot="scope">
							￥{{form.receivedAmount}}
						</template>
					</el-table-column>
					<el-table-column label="未付款金额" align="center" prop="orderTotalAmount">
						<template v-slot="scope">
							￥{{form.weifukuan}}
						</template>
					</el-table-column>
					<el-table-column label="已付款金额" align="center" prop="paymentMethod">
						<template v-slot="scope">
							￥{{form.yifukuan}}
						</template>
					</el-table-column>
				</el-table>
				<div class="mt30">
					<el-table v-loading="loading" :data="form.commodityList" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<!-- <el-table-column label="商品图片" align="center" prop="mainImageUrl">
							<template v-slot="scope">
								<img :src="scope.row.mainImageUrl" alt="" class="radius8" width="90" height="90" />
							</template>
						</el-table-column> -->
						<el-table-column label="商品名称" align="center" prop="commodityName">
							<template v-slot="scope">
								{{scope.row.commodityName}}
							</template>
						</el-table-column>
						<el-table-column label="商品编号" align="center" prop="commodityCode" />
						<el-table-column align="center" prop="specificationId" label="商品规格">
							<template v-slot="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.specificationId" />
							</template>
						</el-table-column>
						<el-table-column label="出厂价" align="center" prop="factoryPrice">
							<template v-slot="scope">
								{{scope.row.factoryPrice}}
							</template>
						</el-table-column>
						<el-table-column label="销售单价（元）" align="center" prop="unitPrice">
							<template v-slot="scope">
								{{scope.row.unitPrice}}
							</template>
						</el-table-column>
						<el-table-column label="数量" align="center" prop="paymentMethod">
							<template v-slot="scope">
								{{scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column label="总价" align="center" prop="subtotal">
							<template v-slot="scope">
								{{scope.row.subtotal}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="mt20 pb10">
					<el-form-item label="发货备注：" prop="remark" label-width="110">
						<el-input size="large" disabled type="textarea" resize="none" class="textReset" :rows="2"
							placeholder="请输入" />
					</el-form-item>
					<el-form-item label="收款备注：" prop="remark" label-width="110">
						<el-input size="large" disabled v-model="form.remark" type="textarea" resize="none" class="textReset" :rows="2"
							placeholder="请输入" />
					</el-form-item>
					<el-form-item label="备注信息：" prop="remark" label-width="110">
						<el-input size="large" type="textarea" v-model="propItem.flyflow.approveDesc" resize="none" class="textReset" :rows="3"
							placeholder="请输入" />
					</el-form-item>
					<div class="text-center pt30 pb30">
						<el-button type="defaultBtn" style="height: 38px;" @click="handleSuccess()">审批通过</el-button>
						<el-button type="operate" 
						style="width: 88px;height: 38px;color: #FF001C;background-color:#fff;border-color: #FF001C;"
						 @click="handleError()">审批否决</el-button>
						<!-- <el-button type="operate" style="width: 88px;height: 38px;" @click="handleSubmit()">退回修改</el-button> -->
					</div>
				</div>
			</div>
			
			<!-- <div class="">
				<div class=" plr30 fb pt20 pb20 border-bottom">
					操作记录
				</div>
				<div class="mt10 p20">
					<el-table v-loading="loading" :data="logList" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<el-table-column label="时间" align="center" prop="id">
							<template v-slot="scope">
								<span class="main-color cursor">线上</span>
							</template>
						</el-table-column>
						<el-table-column label="节点" align="center" prop="customerName">
							<template v-slot="scope">
								11
							</template>
						</el-table-column>
						<el-table-column label="操作人" align="center" prop="orderStatus">
							<template v-slot="scope">
								111
								<dict-tag :options="bus_order_status" :value="scope.row.orderStatus" />
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" prop="orderTotalAmount" />
						<el-table-column label="操作结果" align="center" prop="paymentMethod">
							<template v-slot="scope">
								123456
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
						v-model:limit="queryParams.pageSize" @pagination="getList" />
				</div>
			</div> -->
		</div>
		<!-- 审核通过弹窗 -->
		<successPop ref="success" :item="propItem"></successPop>
		<!-- 审核拒绝弹窗 -->
		<errorPop ref="error" :item="propItem"></errorPop>
		<!-- <returnMoney></returnMoney> -->
	</div>
</template>

<script>
	import {
		orderDetail, //详情
		approvalLog,//操作日志
		orderAdd,//提交订单
	} from "@/api/business/order";
	import returnMoney from './components/returnMoney.vue' //回款信息弹窗
	import {
		receivedList, //回款列表
	} from "@/api/business/received";
	import progressGroup from '@/components/Progress/index.vue' //进度条
	import errorPop from './components/error.vue'//审核拒绝弹窗
	import successPop from './components/success.vue'//审核通过弹窗
	import { format } from "echarts";
	export default {
		components: {
			returnMoney,
			progressGroup,
			errorPop,
			successPop
		},
		data() {
			return {
				progressLine:[],
				bus_customer_type:this.useDict('bus_customer_type').bus_customer_type,//客户类型
				bus_order_status: this.useDict('bus_order_status').bus_order_status, //订单状态
				bus_source: this.useDict('bus_source').bus_source, //订单来源
				bus_pay_type: this.useDict('bus_pay_type').bus_pay_type, //付款类型
				bus_pay_status: this.useDict('bus_pay_status').bus_pay_status, //付款方式	
				bus_logistics_type: this.useDict('bus_logistics_type').bus_logistics_type,
				bus_product_specification_unit: this.useDict('bus_product_specification_unit')
					.bus_product_specification_unit, //规格	
				list: [{}],
				loading: false,
				form: {
					id: ''
				},
				loading: true, // 遮罩层
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNumber: '',
				},
				total: 0,
				logList: [],
				type: 0, //0:查看详情 1
				queryParams1: {
					pageNum: 1,
					pageSize: 10,
					relatedOrder: '',
				}, //回款搜索
				list1: [] ,//回款列表
				propItem:''
			}
		},
		created() {
			this.type = this.$route.query.type ? this.$route.query.type : 0
			this.propItem = this.$route.query.item ? JSON.parse(this.$route.query.item) : ''
			this.form.id = this.$route.params ? this.$route.params.orderId : ''
			this.getDetail()
		},
		methods: {
			getDetail() {
				orderDetail(this.form.id).then(res => {
					this.form = res.data
					//判断有无赠品
					if(this.form.hasGift == '0'){
						//无赠品 提交审核===财务审批 ===工厂发货
						this.progressLine = [
							{
								id:1,
								name:'提交订单',						
							},
							{
								id:2,
								name:'业务审批',
								orderStatus:'1003'
							},
							{
								id:3,
								name:'财务审批',
								orderStatus:'1005'
							},
							{
								id:4,
								name:'工厂发货',
								orderStatus:'1009'
							}
						]
						
					}else if(this.form.hasGift == '1' && this.form.orderGrossProfitRate*1 >= 0.3){
						//有赠品&&毛利率大于等于30%
						this.progressLine = [
							{
								id:1,
								name:'提交订单',						
							},
							{
								id:2,
								name:'业务审批',
								orderStatus:'1003'
							},
							{
								id:3,
								name:'主管审批',
								orderStatus:'1004'
							},
							{
								id:4,
								name:'财务审批',
								orderStatus:'1005'
							},
							{
								id:5,
								name:'工厂发货',
								orderStatus:'1009'
							}
						]
					}else if(this.form.hasGift == '1' && this.form.orderGrossProfitRate*1 < 0.3){
						//有赠品&&毛利率小于30%
						this.progressLine = [
							{
								id:1,
								name:'提交订单',						
							},
							{
								id:2,
								name:'业务审批',
								orderStatus:'1003'
							},
							{
								id:3,
								name:'主管审批',
								orderStatus:'1004'
							},
							{
								id:4,
								name:'领导审批',
							},
							{
								id:5,
								name:'财务审批',
								orderStatus:'1005'
							},
							{
								id:6,
								name:'工厂发货',
								orderStatus:'1009'
							}
						]
					}
					this.progressLine[0].time = this.form.createTime
					for(let key in this.progressLine){
						if(this.form.orderStatus  == this.progressLine[key].orderStatus){
							for (let i = 0; i < key; i++) {
								this.progressLine[i].status = true
							}
						}
					}
					this.getList()
				})
			},
			//操作日志
			getList() {
				this.queryParams.orderNumber = this.form.orderNumber
				approvalLog(this.queryParams).then(res => {
					this.logList = res.data
					this.loading = false
					
				})
			},
			//审批通过
			handleSuccess(){
				this.$refs.success.open()
			},
			//审核拒绝
			handleError(){
				this.$refs.error.open()
			},
			//编辑
			handleEdit() {
				this.$router.push('/order/orderAdd?id=' + this.form.id)
			},
			//提交审核
			handleSubmit(){
				orderAdd(this.form).then(res => {
					if (res.code == 200) {
						this.removeLocal()
						this.$modal.msgSuccess('提交成功')
						setTimeout(() => {
							this.closePage()
						}, 1500)
					}
				})
			}
		}
	}
</script>

